<template>
	<section>
		<div class="search-bar layout pl20rem pr20rem">
			<Search cancel-text="取消" v-model="value"  @keyup.enter.native="submit" placeholder="搜索感兴趣产品" :autofocus="autofocused"/>			
			<slot name="filter"></slot>
		</div>
	</section>
</template>
<script>
	import { Search } from 'mint-ui';

	export default{
		name: 'Search-bar',
        components: {
	        Search
		},	
		props:
		{
			autofocused:{type: Boolean}
		},
		data(){
			return{
				value: ""
			}
		},
		methods: {
			submit()
			{
				this.$router.replace('/search?searchName=' + this.value);
				this.$emit('input', this.value);
			}			
		},
		created()
		{
			if(this.$route.query.searchName)
				this.value = this.$route.query.searchName;		

		}
	}
</script>

<style lang="less">
	.search-bar {
		background: #ff0036 !important;
		height: 65/28rem;
		border-radius: 50/28rem !important;
		.mint-search{
			background: #F8F8F8 !important;
			height: 100%;
			flex: 1;
			border-radius: 50/28rem !important;
		}

		.mint-searchbar{
			padding: initial !important;
			margin:initial !important;
			background-color: #fff !important;
			border-radius: 50/28rem !important;
		}
		.mint-search-list{
			display: none;
		}
		.mint-searchbar-inner{
			padding:0 0 0 38/28rem !important;
			height: 65/28rem;
			border-radius: 50/28rem !important;
		}
		.mint-searchbar-cancel{
			padding-right: 20/28rem;
			color: #3f51b5;
		}
		.mintui-search{
			font-size: 42/28rem !important;
		}
		.mint-searchbar-core{
			padding-left: 15/28rem;
		}
	}
</style>